<template>
  <scale-box class="daping">
    <div class="video-wrap">
      <video class="video" src="./image/background.mp4" autoplay muted loop></video>
    </div>
    <div class="title">
      <img src="./image/index/back.png" class="back" @click="onBack" />
      <span>
        海南省网信大数据重点人监测预警平台
        <img class="animate-img" src="./image/index/title-animate.png" />
      </span>
      <div class="date">
        {{ dateTime }}<i></i><span>{{ time }}</span
        >星期{{ weekDay }}
      </div>
    </div>
    <div class="container">
      <div class="left">
        <div class="left1-select">
          <a-select
            allowClear
            ref="select"
            v-model="category"
            style="width: 140px;"
            dropdownClassName="dapingSelectBox"
            @change="categorySelectChange"
            placeholder="重点人类别"
          >
            <a-select-option :value="item.key" v-for="(item, index) in selectData" :key="index"
              >{{ item.title }}
            </a-select-option>
          </a-select>
        </div>
        <chartYBar :title="leftData1.title" :data="leftData1.data" :thresholdValue="threshold.left1" show-selelct />
        <ScrollRank :title="leftData2.title" :columns="leftData2.columns" :items="leftData2.data"></ScrollRank>
        <smRankBar
          :title="leftData3.title"
          :data="leftData3.data"
          :barWidth="10"
          splitLine
          tab
          :tabList="leftData3.tabList"
          @tab-click="leftTabClick3"
          :thresholdValue="threshold.left3"
        ></smRankBar>
      </div>
      <div class="middle">
        <div class="numBox">
          <div class="numItem">
            <p class="p1">重点人群</p>
            <p class="p2">
              <countTo :startVal="0" :endVal="totalNum['重点人群'] || 0" :duration="5000"></countTo>
            </p>
          </div>
          <div class="numItem">
            <p class="p1">重点人</p>
            <p class="p2">
              <countTo :startVal="0" :endVal="totalNum['重点人'] || 0" :duration="5000"></countTo>
            </p>
          </div>
          <div class="numItem">
            <p class="p1">重点人情报</p>
            <p class="p2">
              <countTo :startVal="0" :endVal="totalNum['情报'] || 0" :duration="5000"></countTo>
            </p>
          </div>
          <div class="numItem">
            <p class="p1">重点人告警</p>
            <p class="p2">
              <countTo :startVal="0" :endVal="totalNum['告警'] || 0" :duration="5000"></countTo>
            </p>
          </div>
          <div class="numItem">
            <p class="p1">重点人案事件</p>
            <p class="p2">
              <countTo :startVal="0" :endVal="totalNum['案事件'] || 0" :duration="5000"></countTo>
            </p>
          </div>
        </div>
        <div class="mapBox">
          <img class="left-img" src="./image/index/border-left.png" />
          <chart-map :data="mapData"></chart-map>
          <!-- <img class="ss-img" src="./image/index/ss.png" @click="onClick" /> -->
          <span class="map-tooltips-box" @mouseout.stop="outMap">
            <img src="./image/index/ss.png" @mousemove.stop="overMap" />
            <div
              id="map-tooltips-wrap"
              class="map-tooltips-wrap"
              v-show="mapToolTips"
              v-if="ssMapData && Object.keys(ssMapData).length > 0 && ssMapData.name"
            >
              <div class="title">{{ ssMapData.name }}</div>
              <div class="listItem">重点区域数量：{{ ssMapData.focusAreaNum }}</div>
              <div class="listItem" style="text-align: right;">重点人群：{{ ssMapData.focusCrowdNum }}</div>
              <div class="listItem">情报数量：{{ ssMapData.intelligenceNum }}</div>
              <div class="listItem" style="text-align: right;">重点人数量：{{ ssMapData.personNum }}</div>
              <div class="listItem">告警数量：{{ ssMapData.warnNum }}</div>
            </div>
          </span>
          <img class="right-img" src="./image/index/border-right.png" />
        </div>
        <chartShadowSingleLine
          :title="middleData.title"
          :data="middleData.data"
          tab
          :tabList="middleData.tabList"
          @tab-click="middleTabClick"
          @timeClick="onTimeClick"
        />
      </div>
      <div class="right">
        <chartYBar
          :title="rightData1.title"
          :data="rightData1.data"
          :thresholdValue="threshold.right1"
          :yAxisLabelPosition="[0, '0']"
          tab
          :tabList="rightData1.tabList"
          @tab-click="rightTabClick1"
        />
        <chartRosePie3 :title="rightData2.title" :data="rightData2.data" />
        <chartLine
          :title="rightData3.title"
          :data="rightData3.data"
          :color="['#F4CD28', '#FF6600', '#D33C36']"
          tab
          :tabList="rightData3.tabList"
          @tab-click="rightTabClick3"
        />
      </div>
    </div>
  </scale-box>
</template>

<script>
import moment from 'moment'
import chartLine from './components/chart-line'
import chartYBar from './components/chart-y-bar'
import chartRosePie3 from './components/chart-rose-pie/index3.vue'
import chartMap from './components/zdr-map'
// import { querySourceUrl, getMapIndicators } from './api/index.js'
import countTo from 'vue-count-to'
import scaleBox from './components/scale-box'
import ScrollRank from './components/scroll-rank'
import smRankBar from './components/smRankBar/index.vue'
import chartShadowSingleLine from './components/chart-shadow-singleLine'
import { ajaxGetDictItems } from '@/api/api.js'
import { getAction } from '@/api/manage'
import {
  getTotal,
  getLeft1,
  getLeft2,
  getLeft3,
  getRight1,
  getRight1keywords,
  getRight2,
  getRight3,
  getMapData,
  getBottom
} from './api/index1.js'
import { getAllAlarmCount } from './api/index2.js'
export default {
  name: 'App',
  components: {
    chartLine,
    chartYBar,
    chartRosePie3,
    chartMap,
    countTo,
    scaleBox,
    ScrollRank,
    smRankBar,
    chartShadowSingleLine
  },
  data() {
    return {
      category: undefined,
      dateTime: moment().format('YYYY-MM-DD'),
      time: moment().format('HH:mm:ss'),
      leftData1: {
        title: '重点人区域分布 TOP5',
        data: []
      },
      leftData2: {
        title: '重点人员列表',
        data: [],
        columns: [
          {
            label: '序号',
            width: 40,
            type: 'index'
          },
          {
            label: '手机号码',
            width: 55,
            prop: 'phoneNumber'
          },
          {
            label: '类型',
            width: 55,
            prop: 'tags'
          },
          {
            label: '区域',
            width: 60,
            prop: 'area'
          }
        ]
      },
      leftData3: {
        title: '重点人事件态势',
        data: [],
        tabList: ['近12月', '近30天', '近7天']
      },
      middleData: {
        title: '重点人群通话频率',
        data: [],
        tabList: ['近30天', '近7天']
      },
      rightData1: {
        title: '重点人告警区域/关键字排行TOP5', //'重点人告警区域排行 TOP5',
        data: [],
        tabList: ['告警区域', '关键字']
      },
      rightData2: {
        title: '重点人告警类型',
        data: []
      },
      rightData3: {
        title: '重点人告警态势',
        data: {},
        tabList: ['近12月', '近30天', '近7天']
      },
      mapData: [],
      dateTimer: null,
      totalNum: {
        情报: 0,
        重点人群: 0,
        重点人: 0,
        告警: 0,
        案事件: 0
      },
      threshold: {
        left1: 0,
        left3: 0,
        right1: 0
      },
      selectData: [],
      mapToolTips: false,
      ssMapData: {}
    }
  },
  async mounted() {
    this.getSelect()
    const a = await ajaxGetDictItems('focusAreaMax') // 重点人区域阈值
    if (a.result.length > 0) {
      this.threshold.left1 = Number(a.result[0].value)
    }
    const b = await ajaxGetDictItems('focusIncidentMax') // 重点人案事件态势阈值
    if (b.result.length > 0) {
      this.threshold.left3 = Number(b.result[0].value)
    }
    const c = await ajaxGetDictItems('focusWarnAreaMax') // 告警区域阈值
    if (c.result.length > 0) {
      this.threshold.right1 = Number(c.result[0].value)
    }
    this._setTime()
    setTimeout(() => {
      this.onGetData()
    }, 1000)
  },
  beforeDestroy() {
    this._clearTimer()
  },
  computed: {
    weekDay: function() {
      const map = {
        1: '一',
        2: '二',
        3: '三',
        4: '四',
        5: '五',
        6: '六',
        7: '日'
      }
      return map[moment().weekday() + 1]
    },
    currentSelect: function() {
      if (this.selectData.length > 0) {
        return this.selectData[this.active].title
      } else {
        return ''
      }
    }
  },
  methods: {
    categorySelectChange() {
      this.onGetData()
    },
    onSelectClick(item, index) {
      this.active = index
    },
    async getSelect() {
      const data = await getAction('/sys/category/loadTreeRoot', {
        async: false,
        pcode: 'B03'
      })
      const { result } = data
      this.selectData = result
      // console.log(result)
    },
    onGetData() {
      this.getMiddleData(5)
      this.getLeftData1()
      this.getLeftData2()
      this.getLeftData3(5)
      this.getMapData()
      this.getRightData1()
      this.getRightData2()
      this.getRightData3(5)
      this.getTotal()
    },
    async getTotal() {
      const res = await getTotal({
        category: this.category
      })
      const { result } = res

      if (result && result.length > 0) {
        result.map(item => {
          this.totalNum[item.typeName] = item.count
        })
      }
      const alarmTotal = await getAllAlarmCount({
        category: this.category
      })
      if (alarmTotal.success) {
        this.totalNum['告警'] = alarmTotal.result
      }
    },
    async getLeftData1() {
      // const query = {
      //   timeType: params.dateType,
      //   startTime: params.startDate,
      //   endTime: params.endDate
      // }
      // const res = await querySourceUrl(query)
      const res = await getLeft1({
        category: this.category
      })
      const { result } = res
      if (result.length > 0) {
        this.leftData1.data = result.map(item => {
          return {
            product: item.typeName + '|' + item.ratio, //只能拼接后面再截取
            count: item.count
            // ratio: item.ratio //不支持这种写法
          }
        })
      } else {
        this.leftData1.data = []
      }
      // let data = []
      // let result1 = [
      //   { label: 'www.jd.com', value: 365, radio: 25.76 },
      //   { label: 'www.xianyu.com', value: 357, radio: 25.19 },
      //   { label: 'www.baidu.com', value: 351, radio: 24.77 },
      //   { label: 'www.taobao.com', value: 344, radio: 24.28 },
      //   { label: 'www.qq.com', value: 244, radio: 24.28 }
      // ]
      // if (result1 && result1.length) {
      //   let result = this.arrSort(result1, 'value') //排序
      //   data = result
      //     .map((item, index) => {
      //       if (index < 5) {
      //         //只取前五的数组值
      //         return {
      //           product: item.label,
      //           count: item.value
      //         }
      //       }
      //     })
      //     .filter(obj => obj !== undefined)
      // }
      // console.log('11111111111111111')
    },
    async getLeftData2(params) {
      const res = await getLeft2({
        category: this.category,
        pageSize: 9999,
        pageNo: 1
      })
      const { result } = res
      if (result.records.length > 0) {
        this.leftData2.data = result.records.map((item, index) => {
          return {
            index: index + 1,
            phoneNumber: item.phoneNumber,
            tags: item.tags,
            area: item.area
          }
        })
      } else {
        this.leftData2.data = []
      }
      // this.leftData2.data = [
      //   {
      //     index: 1,
      //     a1: 11111,
      //     a2: 22222,
      //     a3: 33333
      //   },
      //   {
      //     index: 2,
      //     a1: 11111,
      //     a2: 22222,
      //     a3: 33333
      //   },
      //   {
      //     index: 3,
      //     a1: 11111,
      //     a2: 22222,
      //     a3: 33333
      //   },
      //   {
      //     index: 4,
      //     a1: 11111,
      //     a2: 22222,
      //     a3: 33333
      //   },
      //   {
      //     index: 5,
      //     a1: 11111,
      //     a2: 22222,
      //     a3: 33333
      //   },
      //   {
      //     index: 6,
      //     a1: 11111,
      //     a2: 22222,
      //     a3: 33333
      //   },
      //   {
      //     index: 7,
      //     a1: 11111,
      //     a2: 22222,
      //     a3: 33333
      //   }
      // ]
      // console.log('11111111111111111')
    },
    async getLeftData3(timeType) {
      const params = {
        startTime: '',
        endTime: '',
        timeType,
        category: this.category
      }
      if (timeType === 0) {
        params.startTime = moment()
          .subtract(11, 'days')
          .format('YYYY-MM-DD')
        params.endTime = moment()
          .subtract(0, 'days')
          .format('YYYY-MM-DD')
      }
      const res = await getLeft3(params)
      const { result } = res
      // console.log(result)
      if (result.length > 0) {
        this.leftData3.data = result.map(item => {
          return {
            cityName: item.date,
            alarmCount: item.intelligenceCount
          }
        })
      } else {
        this.leftData3.data = []
      }
      // this.leftData3.data = [
      //   { cityName: '1', alarmCount: 378 },
      //   { cityName: '2', alarmCount: 122 },
      //   { cityName: '3', alarmCount: 122 },
      //   { cityName: '4', alarmCount: 212 },
      //   { cityName: '5', alarmCount: 122 },
      //   { cityName: '6', alarmCount: 112 },
      //   { cityName: '7', alarmCount: 1212 },
      //   { cityName: '8', alarmCount: 112 },
      //   { cityName: '9', alarmCount: 12 },
      //   { cityName: '10', alarmCount: 112 },
      //   { cityName: '11', alarmCount: 12 },
      //   { cityName: '12', alarmCount: 12 }
      // ]
      // console.log('11111111111111111')
    },
    leftTabClick3(name, index) {
      // console.log(name, index)
      if (index == 1) {
        this.getLeftData3(7)
      }
      if (index == 2) {
        this.getLeftData3(5)
      }
      if (index == 3) {
        this.getLeftData3(4)
      }
      // let item = this.alarmDayParamDTOS.find(obj => {
      //   return obj.alarmType == name
      // })
      // let list = item.alarmDayParamDTOS.map(item => {
      //   return {
      //     product: item.cityName,
      //     次数: item.alarmCount
      //     // [name]: item.alarmCount  //注：动态类型有问题
      //   }
      // })
      // this.leftData3.data = list
    },

    async getRightData1(params) {
      // const query = {
      //   timeType: params.dateType,
      //   startTime: params.startDate,
      //   endTime: params.endDate
      // }
      // const res = await querySourceUrl(query)
      const res = await getRight1({
        category: this.category
      })
      const { result } = res
      if (result.length > 0) {
        this.rightData1.data = result.map(item => {
          return {
            product: item.typeName,
            count: item.count
          }
        })
      } else {
        this.rightData1.data = []
      }
    },
    async getRightData1keywords(params) {
      const res = await getRight1keywords()
      const { result } = res
      if (result.length > 0) {
        this.rightData1.data = result.map(item => {
          return {
            product: item.content,
            count: item.rankingNum
          }
        })
      } else {
        this.rightData1.data = []
      }
    },
    rightTabClick1(name, index) {
      console.log(name, index)
      switch (index) {
        case 1:
          this.getRightData1()
          break
        case 2:
          this.getRightData1keywords()
          break
      }
    },
    async getRightData2(params) {
      const res = await getRight2({
        category: this.category
      })
      const { result } = res
      let data = []
      if (result.length > 0) {
        data = result.map(item => {
          return {
            label: item.alarmTypeName,
            value: item.count,
            radio: item.ratio
          }
        })
      }
      this.rightData2.data = this.setChartPieData(data, 'label', 'value', 'radio')
      // let result = [
      //   { label: '淘宝', value: 7464, radio: 20.08 },
      //   { label: '闲鱼', value: 7324, radio: 19.7 },
      //   { label: '贴吧', value: 7392, radio: 19.88 },
      //   { label: '微博', value: 7538, radio: 20.27 },
      //   { label: '朋友圈', value: 7432, radio: 19.99 }
      // ]
    },
    async getRightData3(timeType) {
      const params = {
        startTime: '',
        endTime: '',
        queryTimeType: timeType,
        category: this.category
      }
      if (timeType === 0) {
        params.startTime = moment()
          .subtract(11, 'days')
          .format('YYYY-MM-DD')
        params.endTime = moment()
          .subtract(0, 'days')
          .format('YYYY-MM-DD')
      }
      const res = await getRight3(params)
      const { result } = res
      this.rightData3.data = this.setRight3Data(result, 'alarmLevelList', 'level', 'date', 'count')
    },
    rightTabClick3(name, index) {
      // console.log(name, index)
      switch (index) {
        case 1:
          this.getRightData3(7)
          break
        case 2:
          this.getRightData3(5)
          break
        case 3:
          this.getRightData3(4)
          break
      }
    },
    setRight3Data(list, childKey, labelKey, nameKey, valueKey) {
      let obj = {}
      // 设置legend标签
      list.map(item => {
        item[childKey].map(child => {
          // 填充数据
          let lagend = ''
          switch (child[labelKey]) {
            case 1:
              lagend = '黄色'
              break
            case 2:
              lagend = '橙色'
              break
            case 3:
              lagend = '红色'
              break
            case 4:
              lagend = '蓝色'
              break
          }
          // 初始化数组
          if (!obj[lagend]) {
            obj[lagend] = []
          }

          obj[lagend].push({
            name: child[nameKey],
            value: child[valueKey]
          })
        })
      })
      return obj
    },
    async getMiddleData(timeType, startTime = '', endTime = '') {
      const params = {
        startTime,
        endTime,
        timeType,
        category: this.category
      }
      if (timeType === 0) {
        params.startTime = moment()
          .subtract(11, 'days')
          .format('YYYY-MM-DD')
        params.endTime = moment()
          .subtract(0, 'days')
          .format('YYYY-MM-DD')
      }
      const res = await getBottom(params)
      const { result } = res
      this.middleData.data = this.setChartData(result, 'date', 'callNum', 'averageCallNum')

      // let result = [
      //   { date: '1', count: 10 },
      //   { date: '2', count: 120 },
      //   { date: '3', count: 30 },
      //   { date: '4', count: 40 },
      //   { date: '5', count: 240 },
      //   { date: '6', count: 40 },
      //   { date: '7', count: 340 }
      // ]
      // this.middleData.data = this.setChartData(result, 'date', 'count')
    },
    setMiddleData(list, childKey, labelKey, nameKey, valueKey) {
      let obj = {}
      // 设置legend标签
      list.map(item => {
        item[childKey].map(child => {
          // 填充数据
          let lagend = ''
          switch (child[labelKey]) {
            case 1:
              lagend = '红色告警'
              break
            case 2:
              lagend = '橙色告警'
              break
            case 3:
              lagend = '黄色告警'
              break
            case 4:
              lagend = '蓝色告警'
              break
          }
          // 初始化数组
          if (!obj[lagend]) {
            obj[lagend] = []
          }

          obj[lagend].push({
            name: child[nameKey],
            value: child[valueKey]
          })
        })
      })
      return obj
    },
    middleTabClick(name, index) {
      // console.log(name, index)
      if (index == 1) {
        this.getMiddleData(5)
      }
      if (index == 2) {
        this.getMiddleData(4)
      }
      // if (index == 3) {
      //   this.getMiddleData(4)
      // }
    },
    async onTimeClick(obj) {
      const params = {
        startTime: obj.startDate,
        endTime: obj.endDate,
        timeType: 0
      }
      const res = await getBottom(params)
      const { result } = res
      this.middleData.data = this.setChartData(result, 'date', 'intelligenceCount')
    },

    _clearTimer() {
      clearInterval(this.dateTimer)
    },
    onBack() {
      this.$router.replace('/')
    },
    _setTime() {
      this.dateTimer = setInterval(() => {
        this.time = moment().format('HH:mm:ss')
      }, 1000)
    },
    onClick() {
      // console.log('1111111111111')
    },

    getMapData() {
      this.mapData = []
      // const option = this.$refs.drawer.getOption()
      getMapData({
        category: this.category
      }).then(res => {
        const { result } = res
        let data = []
        if (result && result.length > 0) {
          data = result.map(item => {
            return Object.assign(item, {
              // 返回数据只有城市名（海口），没有城市等级（市/县），后端返回数据应完整返回，例如：海口市，澄迈县等
              name: item.cityName,
              value: item.warnNum,
              labelValueDtoList: item.labelValueDtoList
            })
          })
          this.ssMapData = data.find(obj => {
            return obj.name === '三沙市'
          })
        }

        this.$nextTick(() => {
          this.mapData = data
        })
      })
    },
    // 统一配置成{name: xxx, value: xxx}格式
    setChartData(list, nameKey, valueKey) {
      list.map(item => {
        ;(item.name = item[nameKey]), (item.value = item[valueKey] || 0)
        // data.push({
        //   name: item[nameKey],
        //   value: item[valueKey] || 0
        // })
      })
      return list
    },
    // 统一配置成{name: xxx, value: xxx}格式
    setChartPieData(list, nameKey, valueKey, radioKey) {
      let data = []
      data = list.map(item => {
        return {
          name: item[nameKey],
          value: item[valueKey] || 0,
          ratio: item[radioKey] ? item[radioKey] + '%' : 0
        }
      })
      return data
    },
    setChartLineData(list, childKey, labelKey, nameKey, valueKey) {
      let obj = {}
      list.map(item => {
        item[childKey].map(child => {
          obj[child[labelKey]] = []
        })
      })
      list.map(item => {
        let itemDate = item[nameKey]
        item[childKey].map(child => {
          obj[child[labelKey]].push({
            name: itemDate || child[nameKey],
            value: child[valueKey] || 0
          })
        })
      })
      return obj
    },
    /**
     * 自定义函数名：arrSort
     * @param arr： 被操作数
     * @param key： 需要用作排序的key名
     */
    arrSort(arr, key) {
      arr.sort(function(a, b) {
        return b[key] - a[key]
      })
      return arr
    },
    //计算对象数组中某个属性合计
    countTotal(arr, keyName) {
      let $total = 0
      $total = arr.reduce(function(total, currentValue, currentIndex, arr) {
        return currentValue[keyName] ? total + currentValue[keyName] : total
      }, 0)
      return $total
    },
    overMap() {
      this.mapToolTips = true
    },
    outMap() {
      this.mapToolTips = false
    }
  }
}
</script>
<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

// body {
//   overflow: hidden;
// }
@keyframes fadeToLeft {
  0% {
    opacity: 0;
    transform: translateX(50%);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeToRight {
  0% {
    opacity: 0;
    transform: translateX(-50%);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.left-img {
  position: absolute;
  top: 10%;
  left: 0;
  height: 80%;
  animation: fadeToLeft 1s 2;
  pointer-events: none;
}

.right-img {
  position: absolute;
  top: 10%;
  right: 0;
  height: 80%;
  animation: fadeToRight 1s 2;
  pointer-events: none;
}

.ss-img {
  width: 10vh;
  position: absolute;
  top: 62%;
  right: 15.4%;
  /* height: 80%; */
  animation: fadeToRight 1s 2;
  /* pointer-events: none; */
  cursor: pointer;
}
</style>
<style lang="less" scoped>
@font-face {
  font-family: 'pang';
  src: url(font/PangMenZhengDaoBiaoTiTi-1.ttf);
}

@font-face {
  font-family: 'AGENCYFB';
  src: url(font/AGENCYFB.TTF);
}

@keyframes opacity {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes imgMove {
  0% {
    left: -45%;
  }

  50% {
    left: 50%;
  }

  100% {
    left: -45%;
  }
}

@keyframes leftMove {
  0% {
    margin-left: -120%;
  }

  100% {
    margin-left: 0;
  }
}

@keyframes rightMove {
  0% {
    margin-left: 120%;
  }

  100% {
    margin-left: 0;
  }
}

@keyframes Glow {
  from {
    text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #fff, 0 0 8px #7ba9f6, 0 0 10px #7ba9f6, 0 0 12px #7ba9f6,
      0 0 14px #7ba9f6, 0 0 16px #7ba9f6;
  }

  to {
    text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #7ba9f6, 0 0 5px #7ba9f6, 0 0 6px #7ba9f6,
      0 0 7px #7ba9f6, 0 0 8px #7ba9f6;
  }
}

.daping {
  overflow: hidden;
  // font-family: 'pang';
  display: flex;
  flex-flow: column;
  min-width: 1200px;
  min-height: 600px;

  .video-wrap {
    width: 100%;

    position: absolute;

    // padding-bottom: 56.25%;
    /*9除以16*/

    height: 100vh;

    .video {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      // z-index: 9999;
      object-fit: fill;
    }
  }

  > .title {
    font-family: 'pang';
    animation: 5s opacity 0s linear;
    height: 70px;
    line-height: 70px;
    background-image: url(image/index/title.png);
    background-size: 100% 100%;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    padding: 0 60px;
    padding-left: 40px;
    z-index: 0;

    .back {
      width: 32px;
      height: 32px;
      margin-top: 6px;
      cursor: pointer;
    }

    > span {
      // font-size: 36px;
      // background: linear-gradient(0deg, #cdddf9 0%, #ffffff 100%);
      // -webkit-background-clip: text;
      // -webkit-text-fill-color: transparent;
      // margin-left: 245px;
      font-size: 3.6vh;
      margin-left: 277px;
      position: relative;
      color: #f9fcff;
      // font-style: 'SourceHanSansCN-Bold';
      letter-spacing: 3px;
      text-shadow: 0.2rem 0rem 0.5rem #0068b9, -0.2rem 0rem 0.5rem #0068b9, 0rem 0.2rem 0.5rem #0068b9,
        0rem -0.2rem 0.5rem #0068b9;

      // animation: Glow 3.5s ease infinite alternate;
      .animate-img {
        animation: 6s imgMove 0s infinite;
        position: absolute;
        bottom: -38%;
        width: 100%;
        left: 0;
      }
    }

    > div {
      display: flex;
      align-items: center;
      font-size: 18px;

      i {
        display: block;
        width: 1px;
        height: 22px;
        background: linear-gradient(0deg, #000, #fff, #000);
        margin: 0 23px;
      }
    }

    .date {
      height: 100%;

      span {
        display: block;
        width: 95px;
      }
    }
  }

  .container {
    animation: 5s opacity 0s linear;
    position: relative;
    flex: 1;
    padding: 20px;
    padding-bottom: 22px;
    display: flex;
    flex-flow: row;

    .left,
    .right {
      // min-width: 380px;
      width: 23.92%;
      min-height: 100%;
      display: flex;
      flex-flow: column;
      justify-content: space-between;

      > div {
        height: 26.7vh !important;
        margin-top: 2vh;
        // min-height: 240px!important;
      }

      .left1-select {
        font-size: 14px;
        text-align: center;
        // border: 1px solid;
        border-radius: 4px;
        position: absolute;
        right: 24px;
        top: -24px;
        z-index: 1000;
        // background-color: #fff;
        height: auto !important;
        width: 140px;
        cursor: pointer;
        padding: 2px;
        box-sizing: border-box;

        .show-ul {
          height: auto;
        }

        ul {
          font-size: 14px;
          list-style: none;
          height: 0;
          overflow: hidden;
          color: #333;
          animation: height 1s;
          padding: 0 5px;
          box-sizing: border-box;

          li {
            &:hover {
              background-color: #04aef9;
            }
          }
        }
      }
    }

    .middle {
      flex: 1;
      margin: 0 30px;
      display: flex;
      flex-flow: column;
      justify-content: space-between;
      position: relative;

      .numBox {
        font-family: 'MicrosoftYaHei';
        margin-left: 5vw;
        display: flex;

        .numItem {
          width: 7.2vw;
          margin-right: 5px;
          margin-top: 1vh;

          p {
            color: #fff;
            margin-bottom: 0;
            text-align: center;
            padding: 3px 0;
          }

          .p1 {
            font-size: 1.5vh;
            border: 1px solid #586971;
            background-color: #1438ab;
          }

          .p2 {
            font-size: 1.8vh;
            font-family: 'pang';
            border: 1px solid #225a94;
            border-top: none;
            background-color: #091744;
          }
        }
      }

      .mapBox {
        flex: 1;
        position: relative;
      }
    }

    .left {
      .left1 {
        animation: 1s leftMove linear;
      }

      .left2 {
        animation: 1.5s leftMove linear;
      }

      .left3 {
        animation: 2s leftMove linear;
      }
    }

    .right {
      .right1 {
        animation: 1s rightMove linear;
      }

      .right2 {
        animation: 1.5s rightMove linear;
      }

      .right3 {
        animation: 2s rightMove linear;
      }
    }
  }
}

.select {
  position: absolute;
  bottom: 23.4vh;
  left: 3vh;
  z-index: 2;
  width: 20.555vh;
  min-width: 110px;
  height: 3.888vh;
  margin-right: 1.851vh;
  // background-image: url(./image/select-wrap.png);
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;

  // position: relative;
  .open {
    height: auto;
    padding: 0.926vh 0;
  }

  > div {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.8vh;
    cursor: pointer;

    img {
      width: 1.851vh;
      height: 1.388vh;
      margin-right: 1.388vh;
    }
  }

  > ul {
    // transition: all .5s;
    position: absolute;
    top: 0;
    top: 3.888vh;
    width: 100%;
    background-color: #00ecff;
    z-index: 999;
    height: 0;
    overflow: hidden;

    .active {
      background-color: #f4cd28;
      font-weight: bold;
      cursor: pointer;
    }

    li {
      height: 2.777vh;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.8vh;

      &:hover {
        background-color: #f4cd28;
        font-weight: bold;
        cursor: pointer;
      }
    }
  }
}
/deep/ .ant-select-selection {
  // background-color: #04284e;
  border: 1px solid #006ba3;
  background: rgba(0, 42, 78, 0.9);
  box-shadow: 0 0 5px #006ba3;
}
/deep/ .ant-select-selection-selected-value {
  color: #fff;
}
/deep/.ant-select-arrow {
  color: #fff;
}

/* -----------地图-三沙市鼠标经过效果---------- */
.map-tooltips-box {
  position: absolute;
  top: 62%;
  right: 14.4%;
  // width: 10vh !important;
  // display: inline;
  z-index: 0;
  width: 10vh;
  cursor: pointer;
  img {
    width: 100%;
  }
  .map-tooltips-wrap {
    top: -156%;
    left: -388%;
    position: absolute !important;
    .title {
      color: #fff !important;
    }
    .listItem {
      color: #fff !important;
    }
  }
}
</style>
<style lang="less">
.dapingSelectBox .ant-select-dropdown-menu {
  background-color: rgba(0, 42, 78, 0.9) !important;
}
.dapingSelectBox .ant-select-dropdown-menu-item {
  color: #fff;
}
.dapingSelectBox .ant-select-dropdown-menu-item-selected {
  background-color: #13359c !important;
}

.dapingSelectBox .ant-select-dropdown-menu-item-active {
  background-color: #13359c !important;
}
</style>
